/**
 * 通用的功能分离（升级版）
 * 1. 支持传入多个属性值
 * 2. 解决修改某些属性其他属性变化停止的不同步bug
 */
function startMove(obj, attrs, fn){
    // obj是DOM对象，attrs是变化的属性以及目标属性值的json文件，fn是链式的回调函数
    console.log('*** startMove ***', fn)

    clearInterval(obj.timer);

    obj.timer = setInterval(function(){
        let flag = true; // 默认运动不停止
        for(let a in attrs){
            // 1. 获取当前值
            let curStyle = 0;
            let iTarget = attrs[a];
            if(a === 'opacity'){
                // 如果是透明度，需要特殊处理，因为单位不同，数字类型不同
                curStyle = Math.round(parseFloat(getStyle(obj,a))*100);
            } else{
                curStyle = parseInt(getStyle(obj,a));
            }
            // 2. 计算速度
            let speed = (iTarget - curStyle) / 8;
            speed = speed > 0 ? Math.ceil(speed): Math.floor(speed);
            // 3. 检测停止(只要有没达到目标值的，运动就不停止)
            if(curStyle !== iTarget){
                flag = false;
            }
            if(a === 'opacity'){
                obj.style.filter = 'opacity('+(curStyle + speed)+')';
                obj.style.opacity = (curStyle + speed)/100
            } else{
                obj.style[a] = curStyle + speed + 'px';
            }
        }
        if(flag){
            clearInterval(obj.timer);
            console.log('flag  === true');
            if(fn){
                fn();
            }
        }
    }, 30)
}
// 获取样式中的某些属性值
function getStyle(obj, attr){
    if(obj.currentStyle){
        return obj.currentStyle[attr];
    }
    return getComputedStyle(obj,false)[attr];
}
